<template>
  <div class="login_mian">
    <div class="mindWidth login_top" v-if="!isLogin">
      <img src="../../../static/image/login/logo.png" alt @click="$router.push('/')" />
    </div>
    <div class="bg_mian" v-if="!isLogin">
      <div class="mindWidth main_content_item">
        <div class="main_L">
          <h3>关注我们 了解更多</h3>
          <img src="../../../static/image/login/WeChat-subscription.png" alt />
        </div>
        <div class="main_center">
          <img src="../../../static/image/login/model.png" alt />
        </div>
        <div class="main_R">
          <div class="main_R-t">
            <h3>修改密码</h3>
          </div>
          <div class="main_R-c">
            <div>
              <input type="text" placeholder="请输入手机号码" v-model="userInfo.phoneNumber" />
            </div>
            <div>
              <input type="text" placeholder="请获取验证码" v-model="userInfo.code" />
              <span class="changeHanld" v-show="!showCode" @click="countDown">获取验证码</span>
              <span class="changeHanld" v-show="showCode">{{ val }}后再获取验证码</span>
            </div>
            <div>
              <input type="password" placeholder="请输入密码" v-model="userInfo.cipherCode" />
            </div>
            <div>
              <input type="password" placeholder="请再次输入密码" v-model="password" />
            </div>
            <!-- <button class="changeHanld goLogin">注册</button> -->
            <button class="changeHanld goLogin" @click="goRegister">提交</button>
            <div class="islogin changeHanld">
              已有账号?
              <span class="changeHanld" @click="$router.push('/login')">立刻登录</span>
            </div>
          </div>
          <div class="main_R-b">
            <span>第三方登录</span>
            <img
              @click="isLogin = !isLogin"
              class="changeHanld"
              src="../../../static/image/login/wechat.png"
              alt
            />
            <!-- <img
              class="changeHanld"
              src="../../../static/image/login/qq.png"
              alt=""
            />-->
          </div>
        </div>
      </div>
    </div>
    <div class="bgLoar" v-if="isLogin">
      <div class="content">
        <i class="el-icon-circle-close clone_btn changeHanld" @click="handleClick"></i>
        <div class="bg_title">微信登录</div>
        <div class="bg_image">
          <img src="../../../static/image/userInfo/fenxiangweima.png" alt />
        </div>
        <div class="bg_text">
          <div class="top">请使用微信扫描二维码登录</div>
          <div class="button">"比目镜网站"</div>
        </div>
      </div>
    </div>
    <!-- <div class="footer_text">2015-2020 &copy; 粤IPC备08100293号</div> -->
  </div>
</template>

<script>
import { postRequest, commonRequest } from "../../api/api.js";
export default {
  data() {
    return {
      userInfo: {
        phoneNumber: "",
        code: "",
        cipherCode: ""
      },
      password: "",
      showCode: false,
      val: 60,
      isLogin: false // 显示微信登录框
    };
  },
  methods: {
    handleClick() {
      this.isLogin = false;
    },
    // 获取验证码
    getPhoneCode() {
      commonRequest(
        "/api/ums/umsUsers/sendVerificationCode?type=ForgetPassword&phoneNumber=" +
          this.userInfo.phoneNumber
      ).then(res => {
        if (res == "成功!") {
          this.$message({
            type: "success",
            message: "发送成功，请注意查收"
          });
        } else {
          this.$message({
            type: "warning",
            message: "验证码失败,请重新发送"
          });
        }
      });
    },
    // 倒计时
    countDown() {
      let times = null;
      this.getPhoneCode();
      times = setInterval(() => {
        this.val--;
        this.showCode = true;
        if (this.val === 0) {
          clearInterval(times);
          this.val = 60;
          this.showCode = fale;
        }
      }, 1000);
    },
    // 点击提交
    goRegister() {
      if (this.password !== this.userInfo.cipherCode) {
        this.$message({
          type: "warning",
          message: "两次密码输入不一致"
        });
        if (this.password == "" || this.userInfo.cipherCode == "") {
          this.$message({
            type: "warning",
            message: "密码不能为空"
          });
        }
        return;
      }
      postRequest("/api/forgetPassword", this.userInfo).then(res => {
        // console.log(res);
        if (res.code == 500) {
          let arr = res.message.split(",")[1];
          this.$message({
            type: "warning",
            message: "修改失败"
          });
        } else {
          this.$message({
            type: "success",
            message: "修改成功"
          });
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.bgLoar {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #333;
  overflow: hidden;
  .clone_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    color: #fff;
  }
  .content {
    width: 400px;
    height: 400px;
    // border: 1px solid rgb(83, 82, 82);
    position: relative;
    top: 80px;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .bg_title {
      font-size: 26px;
      color: #fff;
    }
    .bg_image {
      width: 250px;
      img {
        width: 100%;
      }
    }
    .bg_text {
      height: 70px;
      width: 350px;
      background-color: #232323;
      padding: 10px 20px;
      border-radius: 50px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
}
.login_mian {
  background-color: #fff;
}
.login_top {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 80px;
}
.bg_mian {
  width: 100%;
  height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
  background-image: url("../../../static/image/login/bg.png");
  .main_content_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      margin-bottom: 20px;
      color: #fff;
      font-size: 24px;
    }
  }
  .main_R {
    width: 360px;
    height: 500px;
    background-color: #fff;
    .main_R-t {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      height: 90px;
      background-image: url("../../../static/image/login/banner3.png");
      h3 {
        color: #44a2ff;
        font-size: 20px;
        font-weight: 400;
      }
    }
    .main_R-c {
      padding: 0 20px;
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        border-bottom: 1px solid #ccc;
        input {
          color: #000;
          font-size: 16px;
          &::placeholder {
            color: #ccc;
          }
        }
        span {
          color: #44a2ff;
          font-size: 14px;
        }
      }
      button {
        width: 100%;
        background-color: #ccc;
        font-size: 14px;
        color: #fff;
        height: 48px;
        border-radius: 6px;
        margin: 20px auto;
        &.active {
          background-color: #44a2ff;
        }
      }
      .islogin {
        display: flex;
        justify-content: flex-start;
        border: none;
        font-size: 14px;
      }
    }
    .main_R-b {
      display: flex;
      align-items: center;
      height: 80px;
      padding-left: 10px;

      background-image: url("../../../static/image/login/banner3.png");
      span {
        font-size: 14px;
        color: #44a2ff;
      }
      img {
        width: 20px;
        margin: 0 15px;
      }
    }
  }
}
.footer_text {
  height: 60px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
